<template>
	<view>
		<!-- 页首 -->
		<zw-header></zw-header>
		<!-- 左侧导航栏 -->
		<menu-wrapper active-index="2-1" style="background-color: #fff;padding: 0;">
			<view style="display: flex;justify-content: flex-start;align-items: center;margin-top: 40rpx;">
				<image src="/static/image/info/zx.png" style="width: 110rpx;" mode="widthFix"></image>
				<view style="font-size: 36rpx;font-weight: bold;margin-left: 40rpx;">这里是图册类内容标题</view>
			</view>
			<view
				style="display: flex;justify-content: flex-start;align-items: center;height: 50px;padding-bottom: 15rpx;">
				<block v-for="(item, index) in items" :key="index" v-if="index < 10">
					<view :class="categoryIndex== index?'active':'fl'" @click="setCategory(item)" :style="index>0?'margin-left: 20rpx;':''">
						{{item}}
					</view>
				</block>
			</view>
			<view style="display: flex;flex-wrap: wrap;justify-content: flex-start;align-items: center;">
				<view style="width: 16.6%;margin-bottom: 40rpx;" v-for="(item,index) in 15">
					<view style="display: flex;justify-content: center;align-items: center;">
						<image src="/static/image/info/tcnr.png" style="width: 95%;" mode="widthFix"></image>
					</view>
					
				</view>
			</view>
		</menu-wrapper>

		<!-- 页脚 -->
		<!-- <zw-footer></zw-footer> -->
	</view>
</template>

<script>
	import menuWrapper from '@/components/user/common/menu-wrapper.vue';
	import centerConfig from '@/common/config/user/center.config.js';

	import {
		mapState
	} from 'vuex';

	export default {
		components: {
			menuWrapper
		},
		data() {
			return {
				...centerConfig,
				categories: [],
				counts: [],
				tabIndex: 1,
				tagIndex: 1,
				items: ['ADIDAS', '2024早秋', '意大利', '老爹鞋', '男鞋'],
				categoryIndex: 0,
			}
		},
		computed: {
			...mapState(['loginUser']),
			currentTime() {
				const currentHour = new Date().getHours();
				const timeQuantums = ['凌晨', '上午', '下午', '晚上'];
				return timeQuantums[Math.floor(currentHour / 6)];
			}
		},
		onLoad() {
			this.findCategories();
			this.$store.commit('tab', 5);
		},
		methods: {
			setCategory(item) {
				this.categoryIndex = item.id
			},
			findCategories() {
				this.$util.request('/api/v1/category/all', {}, (res) => {
					console.log(res)
					this.categories = res.data;
					this.categories.unshift({
						id: -1,
						name: '全部'
					})
				}, true);
			},
			goUrl(url) {
				uni.navigateTo({
					url: url,
					fail(err) {
						console.log(err)
					}
				})
			},
			clickOption(index) {
				this.tabIndex = index;
			},
			clickTag(index) {
				this.tagIndex = index;
			}
		}
	}
</script>

<style lang="scss">
	.active {
		color: #fff;
		background-color: #0033FF;

		padding: 3px 15px 3px 15px;
		border-radius: 25px 25px 25px 25px;
	}

	.fl {

		padding: 3px 15px 3px 15px;
		background: #E4E4E4;
		border-radius: 25px 25px 25px 25px;
	}
</style>